<template>
    <div :class="`tech-store-item ${mode} ${styleMode}`" v-if="isVaild">
        <div class="store-info" @click="gotoStoreSpecial">
            <div v-if="isSelf" class="is-self-support">自营</div>
            <img v-else class="store-logo" :src="imageSrc" alt="">
            <div class="store-name title-color">{{isSelf ? '品牌自营' : storeInfo.name}}</div>
            <div class="link">
                <MiniIcon name="right" theme="#7D7D83" size="14" :mode="mode" :styleMode="styleMode" />
            </div>
        </div>
        <div class="goods-list">
            <Row class="content" gutter="8">
                <Col span="8" v-for="item in list" :key="item.id">
                    <GoodsItem :itemInfo="item" :isBrand="false" :storeInfo="storeInfo" :mode="mode" :styleMode="styleMode" :theme="theme" />
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { Row, Col, } from 'vant';
import { MiniIcon } from '@components/base';
import { createShopImageSrc } from '@common/utils';
import GoodsItem from './GoodsItem';
import ModeMixin from '@common/mixin';
export default {
    name: 'StoreItem', // 门店项
    mixins: [ModeMixin],
    components: {
        Row,
        Col,
        MiniIcon,
        GoodsItem,
    },
    props: {
        isSelf: Boolean,
        isBrand: {
            type: Boolean,
            default: true,
        },
        storeInfo: {
            type: Object,
            default() {
                return {
                    name: '',
                    logo: '',
                };
            },
        },
        list: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        imageSrc() {
            const { storeInfo } = this.$props;
            return createShopImageSrc(storeInfo ? storeInfo.logo : '');
        },
        isVaild() {
            const { storeInfo } = this.$props;
            const { pick_up, city_express, ordinary_express } = storeInfo;
            return storeInfo.isMainWarehouseInfo ? pick_up || city_express || ordinary_express : true;
        },
    },
    methods: {
        ...mapActions([
            'setSpecialShopInfo',
            'getSpecialStoreInfoById',
        ]),
        async gotoStoreSpecial() {
            const { storeInfo, isBrand } = this.$props;
            if (storeInfo && !isBrand) {
                const storeBaseInfo = await this.getSpecialStoreInfoById(storeInfo.id);
                // 设置专场门店信息
                this.setSpecialShopInfo({
                    ...storeBaseInfo,
                    ...storeInfo,
                });
            } else {
                this.setSpecialShopInfo(null);
            }
            // 跳转到门店专场首页
            this.$router.push(`/shop/special/${storeInfo.id}`);
        },
    }
};
</script>

<style lang="less">
@store-logo-height: 32px;
.tech-store-item {
    .m(@shop-gap-md);
    background-color: @white;
    .p(12);
    .mode-white();
    &.circle {
        border-radius: @shop-border-radius-md;
    }
    .store-info {
        height: @store-logo-height;
        .flex();
        align-items: center;
        .m-b(@gap-md);
        .is-self-support {
            width: 30px;
            height: 16px;
            font-size: 11px;
            line-height: 16px;
            .t-c();
            background-color: @shop-price-color;
            color: @white;
            border-radius: @border-radius / 2;
        }
        .store-name {
            flex: 1;
            font-size: @font-size-md;
            .m-l(@shop-gap);
            font-weight: 500;
            color: @text-color;
        }
        .store-logo {
            width: @store-logo-height;
            height: @store-logo-height;
            border-radius: @shop-border-radius;
            overflow: hidden;
        };
    }
    .goods-list {
    }
}
</style>
